<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子阴影</title>

        <style>
            /* box-shadow: 10px 20px 30px rgba(0,0,0,.4) 
               四个元素分别代表:x偏移（水平方向偏移量） y偏移（垂直方向偏移量） 模糊值 颜色
            */
            .box1 {
                width: 200px;
                height: 200px;
                background-color: white;
                border:1px solid #000;
                box-shadow: 2px 2px 10px rgba(0,0,0,.4);
                margin-bottom: 10px;
            }
            /* box-shadow: 20px 20px 30px 40px rgba(0,0,0,.4);
               五个元素分别代表：x偏移 y偏移 模糊值 阴影延展 颜色
               阴影延展： 向四周延展阴影
            */
            .box2 {
                width: 200px;
                height: 200px;
                background-color: white;
                border: 1px solid #000;
                box-shadow: 2px 2px 10px 10px rgba(0,0,0,.4);
                margin-bottom: 10px;
            }
            /*  box-shadow属性值前加inset单词，表示内阴影
                box-shadow:inset 10px 20px 30px 40px rgba(0,0,0,.4);
            */
            .box3 {
                width: 200px;
                height: 200px;
                background-color: white;
                border: 1px solid #000;
                box-shadow: inset 0px 0px 10px red;
                margin-bottom: 10px;
            }
            /*  box-shadow属性值可以用逗号隔开多个，表示携带多个阴影  */
            .box4 {
                width: 200px;
                height: 200px;
                background-color:white;
                border: 1px solid #000;
                box-shadow: 2px 2px 30px red, 4px 4px 40px blue, 6px 6px 50px  green, inset 0px 0px 6px orange;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </body>
</html>